<template>
	<div class="swiper">
	    <div class="swiper-wrapper">
	        <slot></slot>
	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination"></div>
	    
	    <!-- 如果需要导航按钮 -->
	    <!-- <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div> -->
	    
	    <!-- 如果需要滚动条 -->
	    <div class="swiper-scrollbar"></div>
	</div>
</template>

<script type="text/javascript">
	import Swiper from 'swiper/swiper-bundle.js'
	import 'swiper/swiper-bundle.css'
	export default {       
		mounted() {
			const mySwiper = new Swiper ('.swiper', {
			  // direction: 'vertical', // 垂直切换选项
			  loop: true, // 循环模式选项
			  
			  // 如果需要分页器
			  pagination: {
			    el: '.swiper-pagination',
			  },
			  autoplay:true,
			  // 如果需要前进后退按钮
			  // navigation: {
			  //   nextEl: '.swiper-button-next',
			  //   prevEl: '.swiper-button-prev',
			  // },
			  
			  // 如果需要滚动条
			  scrollbar: {
			    el: '.swiper-scrollbar',
			  },
			})  
		}      
	}
</script>
<style type="text/css">
	.swiper{
		width: 100%;
		height: 10rem;
	}
</style>